<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="vue.min.js"></script>
	<script src="axios.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		tr,
		td {
			padding: 10px 0
		}
		
		#tab {
			margin-top: 20px;
			width: 100%;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<input type="checkbox" @change="checkout" v-model="change">全选
		<button @click="del">删除</button>
		<table id="tab" border="1">
			<tr>
				<th>商品管理</th>
				<th>商品名称</th>
				<th>商品价格</th>
			</tr>
			<tr style="height:200px" v-show="list.length==0">
				<td colspan="3">列表空空如也</td>
			</tr>
			<tr v-for="(item,index) in list">
				<td><input type='checkbox' :value="item" @change="check" @click="fun(index)" v-model="code"></td>
				<td>{{item.title}}</td>
				<td>￥{{item.price}}</td>


			</tr>
			<!-- <h4>{{code}}</h4> -->

		</table>

	</div>
</body>
<script>
	var app = new Vue({
        el: '#app',
        data: {
            list: [],
            change: false,
            code: [],
            put: false,
            lie: "",
            arr: []
        },
        created: function () {
            var self = this;
            axios.get("http://vebcoder.cn:9527/api/goodList?page=30").then(
                function (res) {
                    self.list = res.data;
                    console.log(self.list);
                })
            this.del();
            console.log(this.code);
            
        },
        methods: {
            fun: function (index) {

                this.lie = index;
                this.arr.push(this.lie)
                console.log(this.lie);
            },
            del: function () {

                console.log(this.lie);


                if (this.put) {
                    // console.log(this.lie);
                    console.log(this.code.length);


                    var data = [];
                    for (var i = 0; i < this.arr.length; i++) {
                        data[i] = this.arr[i];
                        console.log(data[i]);

                        this.list.splice(data[i], 1);
                        // console.log(this.list.splice(data[i], 1));
                        this.code = [];
                        this.lie = ""
                        this.put = false;
                        this.arr = [];
                    }

                }
                if (this.code.length > 0) {
                    this.list = "";
                    this.code = [];
                    this.lie = ""
                    this.put = false;
                    this.arr = [];
                }


            },

            check: function () {
                this.change = this.list.length == this.code.length
                this.put = true;
            },

            checkout: function () {
                var slect = this;
                if (this.change) {
                    slect.code = this.list;
                    this.put = true;
                } else {
                    slect.code = [];
                }
            }

        },


    })

</script>

</html>